<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的显示和隐藏</title>
</head>
<body>
<div id="change" class="change">
  <h1 data-if="status" style="background-color: red">Hello, World!</h1>
  <h1 data-if="!status" style="background-color: green">Hello, World!</h1>
</div>

    <script>
        let status = false
        let elements = document.querySelectorAll("#change > h1");
        console.log(elements);

        for (let i = 0; i < elements.length; i++) {
            let element = elements[i]

            if (element.hasAttribute("data-if")) {
                let attributeValue  = element.getAttribute("data-if");
                console.log(attributeValue);

                if (eval(attributeValue)) {
                    element.removeAttribute("data-if")
                }
                else {
                    // 删除元素自身
                    // element.parentNode.removeChild(element)
                    // 使用注释替换当前的节点
                    // 创建一个注释节点
                    let comment = document.createComment("data-if");
                    let parentNode = element.parentNode;
                    element.parentNode.replaceChild(comment, element);
                }
            }
        }
    </script>
</body>
</html>